<!DOCTYPE html>
{% load static %}
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>接口测试平台</title>
    <link rel="icon" href="http://v3.bootcss.com/favicon.ico">
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="robots" content="NONE,NOARCHIVE" />
</head>
<style type="text/css">
    h4{
        padding-left: 150px;
        padding-top: 60px;
        font-size: 22px;
    }
    .fileinput-upload-button{
        position: relative;
        display: inline-block;
    }
    .navbar-nav.navbar-right{
        margin-right: 0px;
    }
    @media (min-width: 768px){
        .navbar-right{
        float: right !important;
        }
    }
    @media only screen and (min-width: 767px){
        .navbar-nav>li>a {
            padding: 8px 15px;
            margin-top: 16px;
            display: block;
            position: relative;
        }
    }
</style>
<body>
<nav  class="navbar navbar-fixed-top navbar-has-shadow">
    <div  class="container">
        <div id="navbar-collapse" class="navbar-collapse collapse" aria-expanded="false">
           <ul class="nav navbar-nav navbar-right">
               <li><a id="user-idle" href="#" class="glyphicon glyphicon-user">&nbsp{{user}}</a></li>
               <li><a id="user-idle" href="#" class="glyphicon glyphicon-open">上传测试用例</a></li>
               <li><a id="logout-btn" href="/login/" target="_top">退出</a></li>
           </ul>
        </div>
    </div>
</nav>
<div class="col-sm-offset-4">
    <h4 href="#">用例编辑步骤</h4>
</div>
<form class="navbar-form" style="margin-top: 1px;margin-left: 1700px">
    <div class="form-group" style="margin-left: -465px; margin-top: 10px">
        <button id="backBtn" type="button" class="btn btn-default "  style="background:#53245d;color:white;margin-top: -45px" ><a href="/Web_test_robotframework/" style="color: white">返回</a></button>
    </div>
</form>
<button class="btn btn-default" style="background:#53245d;color:white;margin-left: 1310px;margin-top: -100px" data-toggle="modal" data-target="#myModal5"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span>上传图片文件</button>
<button id="runcheckBtn"   style="background:#53245d;color:white;margin-left: 1440px;margin-top: -140px" type="button" class="btn btn-default-lg">调试</button>
<button id="savecheckBtn"   style="background:#53245d;color:white;margin-left: 1500px;margin-top: -180px" type="button" class="btn btn-default-lg">保存</button>
<div class="row">
    <div class="container" style="margin-top: -77px">
        <table class="table-hover table-striped table-bordered" style="width:1510px;margin-left: -180px;" id="table">
            <thead>
            <tr>
                <th>ID</th>
                <th style="height: 40px">定位方式</th>
                <th style="height: 40px">方法|操作</th>
                <th style="height: 40px">参数1</th>
                <th style="height: 40px">参数2</th>
                <th style="height: 40px">参数3</th>
                <th style="height: 40px">参数4</th>
                <th style="height: 40px">验证数据</th>
                <th style="height: 40px">备注</th>
                <th style="height: 40px">删除单条用例</th>

            </tr>
            </thead>
            <tbody>
            {% for webcasestep in webcasesteps %}
                <tr>
                {% if webcasestep.Webcase_id == webcase.id  %}
                    <td style="font-size: 17px;height: 50px">{{ webcasestep.id }}</td>
                    <td  style="font-size: 17px;height: 50px">{{ webcasestep.webtestlocation}}</td>
                    <td  style="font-size: 17px;height: 50px;color: #11a3fc">{{ webcasestep.webfindmethod }}</td>
                    <td  style="font-size: 17px;height: 50px">{{ webcasestep.webkwargesone }}</td>
                    <td  style="font-size: 17px;height: 50px">{{ webcasestep.webkwargestwo }}</td>
                    <td  style="font-size: 17px;height: 50px">{{ webcasestep.webkwargesthree }}</td>
                    <td  style="font-size: 17px;height: 50px">{{ webcasestep.webkwargesfour }}</td>
                    <td  style="font-size: 17px;height: 50px">{{ webcasestep.webassertdata }}</td>
                    <td  style="font-size: 17px;height: 50px">{{ webcasestep.webcomments }}</td>
                    <td  style="font-size: 17px;height: 50px"><button class="btn btn-default sm" data-toggle="modal"  onclick="go_delete('{{webcasestep.id}}')" data-target="#myModal2" type="button">删除</button>
                <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-body"><strong>删除用例</strong></div>
                            <h6 class="modal-title" id="myModalLabel" style="color: #53245d; margin-left: 200px;font-size: 15px"><strong>删除后无法撤销，请确认</strong></h6>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                <button type="button" class="btn btn-primary" name="deleBtn" id="deleBtn"   data-dismiss="modal"  style="background:#53245d;color:white;">删除</button>
                            </div>
                        </div>
                    </div>
                </div>
                    </td>
                {% else %}
                {% endif %}
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
</div>

{#新增图像识别模态框#}
<div class="modal fade" id="myModal5" tabindex="-1" role="dialog" aria-labelledby="myModalLabel5" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" type="button" data-dismiss="modal" aria-hidden="true">&times</button>
                <h6 class="modal-title" id="myModalLabel5"><strong>新增图片步骤</strong></h6>
            </div>
            <div class="modal-body">
                <form role="form" method="post" enctype="multipart/form-data" class="form-group" id="change_form" action="/add_image/">
                    <input type="file" name="myfile" style="margin-left: 120px">
                    <input type="submit" value="上传" style="margin-left: 120px;">
                    {% csrf_token %}
                </form>
            </div>
        </div>
    </div>
</div>
</body>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
     //获取页面传递的参数
    var casename_id;
    function GetQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var r = window.location.search.substr(1).match(reg); //获取url中"?"符后的字符串并正则匹配
        var context = "";
        if (r != null)
            context = r[2];
            reg = null;
            r = null;
            return context == null || context == "" || context == "undefined" ? "" : context;
    }
        casename_id = GetQueryString("webcase.id");
    //点击调试运行列表中的用例
    $("#runcheckBtn").click(function(){
        $.ajax({
            url:"fast_test/",
            type:'POST',
            dataType:'text',
            data:{
                "casename_id":casename_id
            }
    });
 });
    //点击删除步骤
     var step_id;
    function go_delete(id) {
        step_id = id
    }
    $("#deleBtn").click(function(){
        $.ajax({
            url:"delete_id/",
            type:'POST',
            dataType:'text',
            data:{
                "step_id":step_id,
                "casename_id":casename_id,
            },
            success: function (data) {
                alert("删除成功");
                window.location.reload();
                console.log(data);
            },
            error:function (data) {
                console.log(data);
                alert("数据重复/提交失败");
            }
    });
 });
  //点击调试运行列表中的用例
    $("#savecheckBtn").click(function(){
        $.ajax({
            url:"save_test/",
            type:'POST',
            dataType:'text',
            data:{
                "casename_id":casename_id
            },
            success: function (data) {
                alert("保存成功");
                window.location.reload();
                console.log(data);
            },
            error:function (data) {
                console.log(data);
                alert("提交失败");
            }
    });
 });




</script>
</html>